import React from 'react'

class App extends React.Component{
    constructor(props) {
        super(props)
    
        this.state = {
             number: Math.floor(Math.random() * 3)
        }
    }

    handleChange = () => {
        this.setState(()=>{
            return {
                number: Math.floor(Math.random() * 3)
            }
        })
    }

    render(){
        // console.log('我在render方法中执行：',this.state.number)
        return(
            <div>
                <button onClick={this.handleChange}>重新生成</button>
                <AppChild number={this.state.number} />
            </div>
        )
    }

    // shouldComponentUpdate(nextProps, nextState){
    //     console.log('新的state',nextState)
    //     return this.state.number !== nextState.number
    //     // if(this.state.number !== nextState.number){
    //     //     return true
    //     // }else{
    //     //     return false
    //     // }
    // }
    
}


class AppChild extends React.PureComponent{
    constructor(props) {
        super(props)
        this.state ={
            number: Math.floor(Math.random() * 3)
        }
    }

    render(){
        console.log('我是子组件的render方法',this.props.number, this.state.number)
        return(
            <div>
                <h1>父组件传递进来的随机数{this.props.number}</h1>
                <h1>子组件自身的随机数{this.state.number}</h1>
                <button onClick={() => this.setState({number: Math.floor(Math.random() * 3)})}>子组件按钮</button>
            </div>
        )
    }

    // shouldComponentUpdate(nextProps, nextState){
    //     console.log('子组件新的state',nextState)
    //     console.log('子组件新的props',nextProps)
    //     // state的判断处理
    //     if( (this.state.number === nextState.number) &&  (this.props.number === nextProps.number) ){
    //         return false
    //     }else{
    //         return true
    //     }
    // }
    
}

export default App